<template>
	<view>
			<button @tap="test">click me</button>
			<video :src="src"></video>
			<button @tap="catchp()" id="video">sss</button>
			<img class="img" v-for="(item) in imgList" :src="item"/>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				src : '',
				imgList:[]
			}
		},
		methods: {
			test() {
					var self = this;
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success: function (res) {
							self.src = res.tempFilePath;
						}
					});
				},
			catchp(){
				var player = document.getElementById("video");
				player.setAttribute("crossOrigin", "anonymous");  //添加srossOrigin属性，解决跨域问题
				    var canvas = document.createElement("canvas");
				    
				    canvas.width = player.clientWidth;
				    canvas.height = player.clientHeight;
				    // canvas = canvas.getContext("2d")
				    canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截
				    var dataURL = canvas.toDataURL("image/png");  //将图片转成base64格式
				    let str = ` <li class="screenshot-item">
				    <div class="shot-time">2022-10-17</div>
				    <img src="${dataURL}" alt="" class="shot-img">
				</li>`
				    $("#screenshot-list").append(str);   //显示在页面中
				    viewer.destroy(); //需要先销毁再渲染
				    viewer = new Viewer(document.getElementById(`screenshot-list`))
				
			}	
		}
	}	
</script>

<style>

</style>
